<template>
  <div class="data-upload-preview-table">
    <!-- 数据列表 -->
    <div class="container" v-if="!waiting">

      <div class="table-wrapper">
        <g-scrollbar class="table-wrapper-scrollbar">
          <div class="table-container">
            <table>
              <!-- 表头 -->
              <thead>
                <tr>
                  <th>#</th>
                  <table-view-title-row v-for="(field, i) in fields" :key="i" :field-index="i" :field-name="field.name"
                    :field-type="field.type" :currentField="currentField" :to-submit-fields="toSubmitFields"
                    :reset-exception="resetException" v-on:set-current-field="setCurrentField">
                  </table-view-title-row>
                </tr>
              </thead>
              <!-- 数据 -->
              <tbody>
                <tr v-for="(item, index) in datas" :key="index">
                  <td>{{index + 1}}</td>
                  <td v-for="(field, idx) in fields" :key="idx" v-bind:class="{ 'align-right': (field.type === 'double' ||
					field.type === 'long' || field.type === 'integer'), 'high-light':  highLight.includes(field.name)}">
                    {{item[field.name]}}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </g-scrollbar>

        <div class="table-loading" v-show='loading'>
          <i class="iconfont icon-loading icon-spin"></i>
        </div>
      </div>
    </div>

    <!-- 缓冲环 -->
    <div class="container" v-else>
      <div class="waiting">
        <div v-if="resultStatus === 'empty'">无属性数据</div>
        <div v-else-if="resultStatus === 'error'">获取数据失败</div>
        <i v-else class="iconfont icon-loading icon-spin"></i>
      </div>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import Bus from '../../utils/event_bus'
  import GScrollbar from '../common/g-scrollbar'
  import TableViewTitleRow from './data-upload-preview-table-title-row'

  export default {

    name: 'table-view',

    components: {
      TableViewTitleRow,
      GScrollbar
    },

    props: {
      previewData: Object,
      toSubmitFields: Array,
      highLight: Array,
    },

    data: function () {
      return {
        fields: null,
        datas: null,
        loading: false,
        waiting: false,
        resultStatus: '',
        resetException: '', // 重置排序按钮例外情况，即不重置的字段
        currentField: ''
      }
    },

    methods: {
      setCurrentField(val) {
        this.currentField = val;
      }
    },

    watch: {
      previewData() {
        if (this.previewData) {
          this.fields = this.previewData.fields;
          this.datas = this.previewData.data;
        }
      }
    },

    mounted() {
      if (this.previewData) {
        this.fields = this.previewData.fields;
        this.datas = this.previewData.data;
      }
    },

  }

</script>

<style lang="scss" rel="stylesheet/scss">
  @import "common";

  .data-upload-preview-table {

    @include absolute(4px, 12px, 10px, 12px);
    z-index: 10;
    font-size: 12px;
    background: $bgWhite;
    overflow: hidden;
    bottom: 80px;

    .g-scrollbar .g-scrollbar-wrapper {
      // width: calc(100% - 10px) !important;
      height: calc(100% - 10px) !important;
    }

    div {
      @include box-sizing(border-box);
    }

    .container {

      height: 100%;
      width: 100%;

      .table-wrapper {

        height: calc(100% - 40px);

        .table-loading {
          position: absolute;
          top: 0;
          background: rgba(255, 255, 255, .3);
          height: 100%;
          width: 100%;
          overflow: hidden;
          text-align: center;
          font-size: 20px;

          >i {
            position: absolute;
            top: 42%;
          }
        }


        .table-wrapper-scrollbar {

          height: 100%;
          width: 100%;

          .table-container {
            overflow-y: hidden;
            overflow-x: hidden;
            // padding-right: 12px;
            height: 100%;
            // width: calc(100% + 15px);

            table {

              border-collapse: collapse;
              min-width: calc(100% - 15px);

              thead {

                background-color: $bgPrimary;
                font-weight: 400;

                th {
                  border: 1px solid $bdGray;
                }

              }

              tbody {

                color: rgba(0, 0, 0, .65);

                td {
                  height: 28px;
                  text-align: left;
                  line-height: 28px;
                  border-collapse: collapse;
                  white-space: nowrap;
                  padding: 0 8px;
                  border: 1px solid $bdGray;
                  min-width: 100px;
                  max-width: 280px;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }

                td:nth-child(1) {
                  text-align: center;
                  min-width: 12px;
                }

                td.align-right {
                  text-align: right;
                }

                // td.high-light {
                //   background-color: #4087f7;
                //   border: 1px solid $bdGray;
                // }
              }
            }

          }
        }
      }

      .flip-wrapper {
        height: 46px;
        width: 100%;
        padding: 12px;
        text-align: center;

        .flip-container {

          overflow: hidden;

          >span {
            height: 22px;
            margin: 0 8px;
            line-height: 20px;
          }

          .hide {
            display: none;
          }

          .page {
            width: 32px;
            height: 20px;
            line-height: 20px;
            padding: 2px 4px;
            border: 1px solid #e6e9f0;
            text-align: center;
            border-radius: $bdRadius;
          }

          .flip {
            cursor: pointer;
            border-radius: $bdRadius;
            color: $gray;
            font-size: 12px;
            line-height: 22px;
            margin: auto;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            width: 22px;
            height: 22px;
            border: 1px solid $bdGray;
            background-color: transparent;

            &:hover {
              border: 1px solid darken($bdGray, 10%);
            }

            &.disable {
              cursor: not-allowed !important;
            }
          }
        }
      }

      .waiting {

        width: 100%;
        position: relative;
        text-align: center;
        top: calc(50% - 30px);

        >div {
          color: $dark;
          font-size: $fontSizeBase;
        }

        >i {
          font-size: 20px;
          line-height: 20px;
        }
      }
    }

  }

</style>
